<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #outer {
            width: 450px;
            height: 540px;
            background-color: gray;
            margin: 0 auto;
            border-radius: 20px;
        }

        #top {
            width: 200px;
            height: 50px;
            margin: 0 auto;
            display: table-cell;
            vertical-align: middle;
            /* background-color: antiquewhite; */
            padding-left: 20px;
        }

        .point {
            width: 20px;
            height: 20px;
            float: left;
            border-radius: 50%;

            margin-left: 10px;
        }

        .bg-blue {
            background-color: dodgerblue;
        }

        .bg-green {
            background-color: darkgreen;
        }

        .bg-red {
            background-color: orangered;
        }

        #result {
            width: 97%;
            background-color: white;
            height: 50px;
            line-height: 50px;
            margin: 0 auto;
            border: solid 2px orangered;
            font-size: 35px;
            text-align: right;
        }

        #button {
            width: 99%;
            height: 420px;
            margin: 10px auto;
        }

        #button div {
            width: 24%;
            height: 80px;
            float: left;
            background-color: #7fffd4;
            margin: 2px;
            font-size: 30px;
            text-align: center;
            line-height: 80px;
            font-family: 微软雅黑;
        }

        #button div:hover {
            background-color: orangered;
        }
    </style>
    <script>
        /*
        1.运算符不能连续输入
        2.字符不能超出结果框
        3.不能以0开头，运算错误  //不是bug。不用解决。
        4.小数点不能连续输入
        5.某些运算符不能放在最开头
        6.÷和×也这个符号显示
        7.结果出来后，直接输入数字。新的开始
        8.运算符不能在最后一个字符

        */

        var isOperatorCanClick = false;//操作符是否可以点击
        var isPointCanClick = true;//点师傅可以点击
        var isEqualAlreadyClick = false; //等号没被点击过

        //点击数字按钮
        function clickNumber(num) {
            var res = document.getElementById("result").innerHTML;
            if (res.length >= 20) {
                return;
            }
            if (isEqualAlreadyClick) {
                clearResult();
                document.getElementById('result').innerHTML = num;
                isEqualAlreadyClick = false;
            } else {
                document.getElementById('result').innerHTML += num;
            }
            isOperatorCanClick = true;
        }
        //点击运算按钮
        function clickOperator(operator) {
            //判断最后一位是否是运算符，是的话不能点击
            var res = document.getElementById("result").innerHTML;
            if (res.length >= 20) {
                return;
            }

            last = res.charCodeAt(res.length - 1);
            if (isOperatorCanClick) {
                document.getElementById('result').innerHTML += operator;
                isPointCanClick = true;
                isOperatorCanClick = false;
            }
        }

        //点击点号
        function clickPoint(Point) {
            var res = document.getElementById("result").innerHTML;
            if (res.length >= 20) {
                return;
            }
            if (isEqualAlreadyClick) {
                clearResult();
                isPointCanClick = true;
                if (isPointCanClick) {
                    document.getElementById('result').innerHTML += Point;
                    isPointCanClick = false;
                    isEqualAlreadyClick = false;
                }
            } else {
                if (isPointCanClick) {
                    document.getElementById('result').innerHTML += Point;
                    isPointCanClick = false;
                }
            }

        }


        //实现结果计算
        function doCale(num) {
            var express = document.getElementById('result').innerHTML;
            express = express.replace('÷', '/')
            express = express.replace('×', '*')
            var firstCode = express.charCodeAt(0);
            var lastCode = express.charCodeAt(express.length - 1);
            if (firstCode == 37 || firstCode == 42 || firstCode == 47 ||
                lastCode == 37 || lastCode == 42 || lastCode == 47 || lastCode == 43 || lastCode == 45) {
                document.getElementById('result').innerHTML = "你输入的内容有误！";
                return;
            }
            document.getElementById('result').innerHTML = eval(express);
            isEqualAlreadyClick = true;
        }

        //清空结果
        function clearResult() {
            document.getElementById('result').innerHTML = '';
        }

        //回退功能
        function deleteLast() {
            var res = document.getElementById("result").innerHTML;
            document.getElementById("result").innerHTML = res.substring(0, res.length - 1);
        }

        //正负号切换
        function switchOperator() {
            var res = document.getElementById("result").innerHTML;
            if (res.charCodeAt(0) == 45) {
                document.getElementById("result").innerHTML = res.substring(1, res.length);
            }
            else {
                document.getElementById("result").innerHTML = '-' + res;
            }
        }

        //键盘按键
        function inputValue(e) {
            var code = e.keyCode;
            console.log(code);
            if (code >= 96 && code <= 105) {
                clickNumber(String.fromCharCode(code - 48));

            }
            else if (e.shiftKey && code == 56) {
                clickOperator("×")
            } else if (e.shiftKey && code == 53) {
                clickOperator("%");
            } else if (e.shiftKey && code == 187) {
                clickOperator("+");
            } else if (e.shiftKey && code == 189) {
                clickOperator("-");
            }



            if (code == 111) {
                clickOperator("÷");
            }
            if (code == 106) {
                clickOperator("×");
            }
            if (code == 109) {
                clickOperator("-");
            }
            if (code == 107) {
                clickOperator("+");
            }
            if (code == 13) {
                doCale();
            }
            if (code == 8) {
                deleteLast();
            }
            if (code == 110) {
                clickPoint(".");
            }
        }
    </script>
</head>

<body onkeyup="inputValue(event)">
    <div id="outer">
        <div id="top">
            <div class="point bg-blue"></div>
            <div class="point bg-green"></div>
            <div class="point bg-red"></div>
        </div>
        <div id="result"></div>
        <div id="button">
            <div onclick="clearResult()">AC</div>
            <div onclick="switchOperator()">+/-</div>
            <div onclick='clickOperator("%")'>%</div>
            <div onclick='clickOperator("÷")'>÷</div>
            <div onclick='clickNumber("7")'>7</div>
            <div onclick='clickNumber("8")'>8</div>
            <div onclick='clickNumber("9")'>9</div>
            <div onclick='clickOperator("×")'>*</div>
            <div onclick='clickNumber("4")'>4</div>
            <div onclick='clickNumber("5")'>5</div>
            <div onclick='clickNumber("6")'>6</div>
            <div onclick='clickOperator("-")'>-</div>
            <div onclick='clickNumber("1")'>1</div>
            <div onclick='clickNumber("2")'>2</div>
            <div onclick='clickNumber("3")'>3</div>
            <div onclick='clickOperator("+")'>+</div>
            <div onclick='clickNumber("0")'>0</div>
            <div onclick="deleteLast()">回退</div>
            <div onclick='clickPoint(".")'>.</div>
            <div onclick='doCale()'>=</div>
        </div>
    </div>

</body>

</html>